Como añadir fuentes a mayores de las que hay disponibles de manera predeterminada en una página web usando CSS

Para cargar fuentes usando CSS podemos hacerlo utilizando el siguiente código dentro del archivo CSS o en la etiqueta de estilos:

@font-face {
    font-family: "CustomFont";
    src: url("RockSalt-Regular.ttf");
}

En la linea de src pondremos la ruta al archivo ttf de la fuente, si tenemos el archivo en la misma carpeta que el CSS solo tendremos que poner el nombre del archivo.

El siguiente código muestra un ejemplo completo:

<html>
<head>
    <style>
        @font-face {
            font-family: "CustomFont";
            src: url("RockSalt-Regular.ttf");
        }

        h1 {
            font-family: "CustomFont";
        }
    </style>
</head>

<body>
    <h1>Test working</h1>
</body>

</html>

Podemos incrustar las fuentes usando directamente Google fonts sin necesidad de descargar un archivo de fuentes .ttf

Tenemos dos metodos, usando la etiqueta link en el head o usando import en el css

Etiqueta link

Para usar la etiqueta link solo tenemos que seleccionar la fuente que queramos y despues copiar el código que nos da dentro del head de nuestro código:

Y en el css indicamos el font-family de la fuente:

El ejemplo completo sería así:

<html>
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

        <style>
            h1 {
                font-family: 'Roboto', sans-serif;
            }
        </style>
    </head>

    <body>
        <h1>Test working</h1>
    </body>

</html>

import en css

Para usar la etiqueta import solo tenemos que seleccionar la opción de @import en la web de google fonts y meter el código en nuestro css

NOTA: en la web aparece el código con la etiqueta style para incrustarlo directamente en el head, si queremos meterlo en nuestro css directamente tenemos que eliminar la etiqueta style

El código completo quedaría asi:

<html>
    <head>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

            h1{
                font-family: 'Roboto', sans-serif;
            }
        </style>
    </head>

    <body>
        <h1>Test working</h1>
    </body>

</html>

CSS | Fuentes | Custom

Fuentes custom en CSS

Etiqueta link

import en css